<template>
    <div>
        <div style="margin-top: 15px;">
            <el-row>
                <el-input placeholder="请输入维修记录编号" v-model="search.mainId" class="input-with-select">
                    <el-select v-model="search.mainStatus" style="width:100px" slot="prepend" placeholder="请选择">
                        <el-option label="全部" value="0"></el-option>
                        <el-option label="未分配" value="1"></el-option>
                        <el-option label="已分配" value="2"></el-option>
                        <el-option label="已维修" value="3"></el-option>
                        <el-option label="已撤销" value="4"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="findData"></el-button>
                </el-input>
            </el-row>
        </div>

        <el-table
                :data="tableData.list"
                border
                style="width: 100%">
            <el-table-column
                    prop="mainId"
                    label="编号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="mainPerson"
                    label="维修人员"
                    width="120"
                    :formatter="userFormat">
            </el-table-column>
            <el-table-column
                    prop="disTime"
                    label="分配时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="personPay"
                    label="人工费"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="matiPay"
                    label="材料费"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="mainStatus"
                    label="检修状态"
                    width="120"
                    :formatter="statusFormat">
            </el-table-column>
            <el-table-column
                    prop="postponeDegree"
                    label="维修延迟程度"
                    width="120"
                    :formatter="postponeFormat">
            </el-table-column>
            <el-table-column
                    prop="checkTime"
                    label="维修检测时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="alterTime"
                    label="最后修改时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="160">
                <template slot-scope="scope">
                    <!--                    <el-button @click="handleClick(scope.row)" type="text" size="middle">查看</el-button>-->
                    <el-button @click="edit(scope.row)" type="text" size="middle">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin: 5px 45%"
                background
                layout="prev, pager, next"
                :total="tableData.total"
                :current-page="this.queryParams.pageNo"
                :page-size="this.queryParams.pageSize"
                @current-change="changePageNo">
        </el-pagination>
    </div>
</template>


<script>
    import showDMaintenance from '@/views/supervision/show_dmaintenance'
    import {getData as get} from '../../api/dMaintenance'

    export default {
        //inject: ['reload'],
        //name: "",
        data() {
            return {
                search: {
                    mainStatus: "",
                    mainId: ""
                },
                queryParams: {
                    pageNo: 1,
                    pageSize: 10,
                    mainStatus: "",
                    mainId: "",
                    mainPerson:"1",
                },
                tableData: {},
                userData:{}
            }
        },
        created() {
            let param = new URLSearchParams();
            param.append('pageNo', '1');
            param.append('pageSize', '10');
            param.append('mainPerson','1');
            this.getData(param);
        },
        watch: {
            queryParams: {
                handler: function () {
                    let param = new URLSearchParams();
                    param.append('pageNo',this.queryParams.pageNo);
                    param.append('pageSize',this.queryParams.pageSize);
                    param.append('mainStatus',this.queryParams.mainStatus);
                    param.append('mainId',this.queryParams.mainId);
                    param.append('mainPerson',this.queryParams.mainPerson);

                    this.getData(param);
                },
                deep: true
            }
        },
        mounted() {
        },
        methods: {
            //获取列表数据
            getData(param) {
                //【注意】必须使用这种方式传递参数，否则后台参数无法接收到
                // 具体原因请看https://blog.csdn.net/csdn_yudong/article/details/79668655
                let that = this;
                // 执行方法
                get(param).then(r=>{
                    console.log(r);
                    that.tableData = r.list;
                    that.userData = r.dUser;
                }).catch(_=>{
                    console.log(_);
                })
            },
            userFormat(row, column, cellValue, index){
                if (cellValue == this.userData.uId){
                    return this.userData.username
                }
            },
            statusFormat(row, column, cellValue, index) {
                //1、未分配 2、已分配 3、已维修 4、撤销
                if (cellValue == 1){
                    return "已分配"
                }else if (cellValue == 2){
                    return "已维修"
                }else {
                    return "已撤销"
                }
            },
            postponeFormat(row, colum, cellValue, index) {
                //1、一般 2、比较严重 3、严重
                if (cellValue == 1){
                    return "一般"
                }else if (cellValue == 2){
                    return "比较严重"
                }else {
                    return "严重"
                }
            },
            changePageNo(i) {
                this.queryParams.pageNo = i;
            },
            findData() {
                console.log("查询");
                this.queryParams.pageNo = 1;
                this.queryParams.mainStatus = this.search.mainStatus;
                this.queryParams.mainId = this.search.mainId;
            },
            edit(row) {
                let that = this;
                this.$layer.iframe({
                    content: {
                        content: showDMaintenance, //传递的组件对象
                        parent: this,//当前的vue对象
                        data: {mainId:row.mainId}//props
                    },
                    area: ['400px', '500px'],
                    title: '编辑维修记录',
                    shade: true,
                    shadeClose: false,
                    cancel(){
                        console.log("关闭")
                        let param = new URLSearchParams();
                        param.append('pageNo', '1');
                        param.append('pageSize', '10');
                        param.append('mainPerson','1');
                        that.getData(param);
                    }
                });
            },
        }
    }
</script>

<style>
    .cell{
        text-align: center!important;
    }
</style>